import { Card, Form, Input, Button, Checkbox,message } from "antd";
import logo from "../assets/logo.png";
import "./login.scss";
import { useStore } from "../store";
import {useNavigate} from 'react-router-dom'

const Login = () => {
    const {loginStore}=useStore()
    const navigate=useNavigate()
    
  const onFinish = (values) => {
    console.log("Success:", values);
    loginStore.getToken({
        mobile:values.username,
        code:values.password
    })
    navigate('/',{replace:true})
    message.success('登录成功')
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" /> {/* 登录表单 */}{" "}
        <Form
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          initialValues={{
            remember: true,
          }}
          validateTrigger={
              ['onBlur','onChange']
          }
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"

        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              {
                required: true,
                message: "请输入用户名",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
              {
                  len:6,
                  message:'请输入6位密码',
                  validateTrigger:"onBlur"
              }
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name="remember"
            valuePropName="checked"
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Checkbox> 记住我 </Checkbox>{" "}
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType="submit" >
              登录{" "}
            </Button>{" "}
          </Form.Item>{" "}
        </Form>{" "}
      </Card>
    </div>
  );
};

export default Login;
